<template>
 <swiper :options="swiperOption" >
    <!-- slides -->
    <swiper-slide>
        <img class="swiperimg" src="https://source.qunarzz.com/site/images/wap/home/recommend/iphoneplus/dujia_shuqi_banner_20180710.jpg" alt="">
    </swiper-slide>
    <swiper-slide>
        <img class="swiperimg" src="https://img1.qunarzz.com/qs/1806/2f/1569f106565f8502.jpg" alt="">
    </swiper-slide>
    <swiper-slide>
         <img class="swiperimg" src="https://img1.qunarzz.com/qs/1806/5a/f96ab1ab02d30602.jpg" alt="">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    
    <!-- 左右箭头 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
export default {
    name: 'homeSwiper',
    data () {
        return{
            swiperOption: {
                // 如果需要分页器，即下面的小圆点
                pagination: '.swiper-pagination',
                loop: true,
                // 自动播放时间
                autoplay: 1500,
                  // 播放的速度
                speed: 1000,
                // 这样，即使我们滑动之后， 定时器也不会被清除
                autoplayDisableOnInteraction: false,
                    // 如果需要前进后退按钮
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                // 如果需要滚动条
                scrollbar: '.swiper-scrollbar',
            }
        }
    }
}
</script>

<style scoped>
  .swiperimg{
      width: 100%;
      height:300px;
  }
  /* >>>穿透 */
  .swiper-pagination >>> .swiper-pagination-bullet-active{
      background: red;
  }
</style>


